<template>
  <div class="login_register">

    <el-tag type="success" v-show="boolean" :disable-transitions="boolean" size="medium" style="font-size: 14px">{{info}}</el-tag>
    <br> <br>
    <el-select v-model="value" :placeholder="select" ref="select" @change="getLabel" @focus="focus" >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                 :disabled="item.disabled"  >
      </el-option>
      &nbsp
    </el-select>

    <div class="login_register_input" v-show="inputShow" >
      <el-input v-model="input" placeholder="请输入邀请码" ref="inputFocus" @blur="blur" @keydown.esc.native="closeInput"></el-input>
      <div class="login_register_input_btn">
        <el-row>
          <el-button type="primary" @click="goRegister" round>立即注册</el-button>
        </el-row>
      </div>
    </div>
    <span class="login_register_span">提示：由于管理员身份过于高端，您暂时不能注册
      <br> 按Esc可收起
    </span>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      options: [{
        value: '管理员',
        label: '管理员',
        disabled: true,
      }, {
        value: '厂商',
        label: '厂商'
      }, {
        value: '员工',
        label: '员工'
      },],
      value: '',
      info: '请选择您要注册的身份',
      boolean: false,
      input: '',
      inputShow: false,
      select: '请选择',
    }
  },
  updated() {
    this.$refs.inputFocus.focus();
  },
  methods: {
    getLabel() {
      // alert(this.value)
      this.info = '您选择了'+ this.value + '，请联系管理员获去'+ this.value +'“邀请码”。'
      this.inputShow = true;
    },
    closeInput() {
      this.inputShow = false;
      this.value = '请重新选择';
      this.info = '请选择您要注册的身份';
    },
    blur(){
      this.$refs.inputFocus.focus();
    },
    focus() {
      this.boolean = true;
    },
    goRegister() {
      /*if (this.input === '123123' || this.input === '321'){
        this.$router.push({
          // path: '/goRegister?value='+this.value+'',
          path: '/goRegister/'+this.value+'/'+this.input+'',
        })
      }else {
        return 0;
      }*/
      this.$router.push({
        // path: '/goRegister?value='+this.value+'',
        path: '/goRegister/'+this.value+'/'+this.input+'',
      })
    }
  }
}
</script>

<style scoped>
.login_register {
  width: 390px;
  height:350px;
}
.login_register_input {
  position: relative;
  top: 50px;
  width: 200px;
  left: 50px;
  background-color: red;
  /*opacity: .5;*/
}
.login_register_input_btn {
  position: absolute;
  top: 0;
  left: 210px;
}
.login_register_span {
  position: absolute;
  top: 250px;
  left: 30px;
}
</style>
